<template>
  <div class="home">
    <el-carousel arrow="never">
      <el-carousel-item v-for="item in bannerList">
        <img :src="item.imgUrl" alt="" />
      </el-carousel-item>
    </el-carousel>
    <div class="content">
      <!--   产品优势   -->
      <el-divider> 氢油产品的优势 </el-divider>
      <div class="wayList">
        <div class="way" v-for="item in wayList">
          <img :src="item.imgUrl" alt="" />
          <div class="way-title">{{ item.title }}</div>
          <div class="way-desc">{{ item.zhaiyao }}</div>
        </div>
      </div>
      <!--   应用领域   -->
      <el-divider> 氢油技术的应用领域 </el-divider>
      <div class="fieldList">
        <div class="field" v-for="item in fieldList">
          <div class="field-title">{{ item.title }}</div>
          <div class="field-intro">
            <img :src="item.imgUrl" alt="" />
            <div class="desc">{{ item.zhaiyao }}</div>
          </div>
        </div>
      </div>
      <!--   商业愿景   -->
      <el-divider> 商业愿景 </el-divider>
      <div class="vision">
        <div class="vision-item">降低氢能储运成本，打造新型绿氢技术经济体系，为实现双碳目标提供关键产业技术支撑</div>
        <div class="vision-item">解决氢能规模化在储运、加注环节重的安全隐患问题，提高储运安全性</div>
        <div class="vision-item">
          建立基于液态有机储氢材料技术的高效低成本高安全性氢储能综合实验基地、示范基地与生产基地
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { $http } from '@/service/request/index'

const bannerList = ref([])
const wayList = ref([])
const fieldList = ref([])

const getBanner = async () => {
  const { data } = (await $http('queryBannerList', {})) as any
  bannerList.value = data
}
const getWayList = async () => {
  const { data } = (await $http('queryAdvantageList', {})) as any
  wayList.value = data
}
const getFieldList = async () => {
  const { data } = (await $http('queryFieldList', {})) as any
  fieldList.value = data
}

getBanner()
getWayList()
getFieldList()
</script>
<style lang="scss" scoped>
@import './styles/common.scss';
@import './styles/web.scss';
@import './styles/phone.scss';
</style>
